<template>
  <div class="app-container">
    <!-- 添加或修改租赁合同对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form-flex">
        <el-row :gutter="20">

          <el-col :span="12" :xs="24">
            <el-form-item label="出租房源" prop="resourceId">
              <treeselect
                :disabled="disabled"
                v-model="form.resourceId"
                :options="orgOptions"
                :show-count="true"
                :disable-branch-nodes="true"
                placeholder="选择出租房源"
              >
                <div slot="value-label"  slot-scope="{ node }">{{ node.nestedSearchLabel }}</div>
              </treeselect>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="合同类型" prop="contractCategoryId">
              <contract-category-filterable
                v-model="form.contractCategoryId"
                ref="contractRefs"
                :disabled="disabled"
                @cv="selectContractCategory"
              />
            </el-form-item>
          </el-col>
          <fieldset>
            <legend>双方信息</legend>
            <el-col :span="8" :xs="24">
              <el-form-item label="甲方(出租方)" prop="partyId">
                <el-select v-model="form.partyId" placeholder="请选择甲方" @change="clickPartyId" :disabled="disabled">
                  <el-option
                    v-for="item in firstPartyOptions"
                    :key="item.id"
                    :label="item.partyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="甲方联系人" prop="partyContacts">
                <el-input v-model="form.partyContacts" placeholder="请输入甲方联系人" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="甲方手机号码" prop="partyPhone">
                <el-input v-model="form.partyPhone" placeholder="请输入甲方手机号码" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="乙方(承租方)" prop="customName">
                <el-input v-model="form.customName" placeholder="请输入乙方(承租方)" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="租户类型" prop="customType">
                <el-select v-model="form.customType" placeholder="请选择租户类型" :disabled="disabled">
                  <el-option
                    v-for="item in dict.custom_type"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="联系人" prop="linkman">
                <el-select v-model="form.linkman" placeholder="请选择联系人" :disabled="disabled">
                  <el-option
                    v-for="item in customInfoOptions"
                    :key="item.customId"
                    :label="item.customName"
                    :value="item.customId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="手机号码" prop="cellPhoneNumber">
                <el-input v-model="form.cellPhoneNumber" placeholder="请输入手机号码" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="联系地址" prop="contactAddress">
                <el-input v-model="form.contactAddress" placeholder="请输入内容" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="form.idCard" placeholder="请输入身份证号" :disabled="disabled"/>
              </el-form-item>
            </el-col>
          </fieldset>
          <fieldset>
            <legend>合同信息</legend>
            <el-col :span="8" :xs="24">
              <el-form-item label="合同开始日期" prop="beginTime">
                <el-date-picker clearable size="small"
                                v-model="form.beginTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择合同开始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="租赁期限" prop="allottedTime">
                <el-input-number v-model="form.allottedTime"  :min="1"  label="请输入租赁期限" />         月
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="合同结束日期" prop="finishTime">
                <el-date-picker clearable size="small"
                                v-model="form.finishTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择合同结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="出租面积" prop="leaseArea">
                <el-input-number v-model="form.leaseArea"  :min="0"  label="请输入出租面积" />           m²
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="签署日期" prop="signTime">
                <el-date-picker clearable size="small"
                                v-model="form.signTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择签署日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="经营业态" prop="businessStatus" v-if="this.form.customType=='002'">
                <el-select v-model="form.businessStatus" placeholder="请选择经营业态" :disabled="disabled">
                  <el-option
                    v-for="item in dict.business_status"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="经营品牌" prop="businessBrand" v-if="this.form.customType=='002'">
                <el-input v-model="form.businessBrand" placeholder="请输入经营品牌" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="24" :xs="24">
              <el-form-item label="经营范围" prop="businessScope" v-if="this.form.customType=='002'">
                <el-input v-model="form.businessScope" type="textarea" placeholder="请输入内容" :disabled="disabled"/>
              </el-form-item>
            </el-col>
          </fieldset>

          <el-tabs type="border-card" v-model="activeName" style="width: 100%">
            <el-tab-pane label="保证金" name="bzj">
              <el-col :span="8" :xs="24">
                <el-form-item label="收费项目" prop="chargeId">
                  <el-select v-model="form.chargeId" placeholder="请选择收费项目" disabled>
                    <el-option
                      v-for="item in itemOptions"
                      :key="item.chargeId"
                      :label="item.chargeName"
                      :value="item.chargeId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="保证金金额" prop="chargeMoneys">
                  <el-input-number v-model="form.chargeMoneys"  :min="0" :precision="2"  label="描述文字"></el-input-number>
                </el-form-item>
              </el-col>
            </el-tab-pane>

            <el-tab-pane label="租金" name="zj">
              <el-col :span="8" :xs="24">
                <el-form-item label="收费标准" prop="roomNormId">
                  <el-select v-model="form.roomNormId" placeholder="请选择收费标准" >
                    <el-option
                      v-for="item in normOptions"
                      :key="item.normId"
                      :label="item.normNames"
                      :value="item.normId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="费用标准" prop="roomNormMoney">
                  <el-input-number v-model="form.roomNormMoney" :precision="2" :step="0.5" :min="0">
                  </el-input-number>元   /月
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="计费周期" prop="chargingCycle">
                  <el-select v-model="form.chargingCycle" placeholder="请选择计费周期" >
                    <el-option
                      v-for="item in dict.payment_rules"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="生成规则" prop="markerRule">
                  <el-select v-model="form.markerRule" placeholder="请选择生成规则" >
                    <el-option
                      v-for="item in dict.charge_generate_type"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="收款日期" prop="chargeTime">
                  <el-date-picker clearable size="small"
                                  v-model="form.chargeTime"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择收款日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-tab-pane>
          </el-tabs>

          <fieldset style="width: 100%;margin-top: 10px">
            <legend>其他信息</legend>
            <el-col :span="24" :xs="24">
              <el-form-item label="附件" prop="filePath">
                <file-uploads v-model="form.filePath" :limit="3" ref="fileUploadsRef" />
              </el-form-item>
            </el-col>
            <el-col :span="24" :xs="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :disabled="disabled"/>
              </el-form-item>
            </el-col>
          </fieldset>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getLeaseContract, addLeaseContract, updateLeaseContract} from "@/api/lease/leaseContract";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { getFirstParty } from "@/api/lease/firstParty";
  import { contractMixin } from "./contractMixin";
  import {listCustomInfo} from "@/api/waitress/customInfo";
  import {getRoom} from "@/api/property/room";
  import {getCustomInfo} from "@/api/waitress/customInfo";
  import { listFirstParty} from "@/api/lease/firstParty";
  import FileUploads from "@/components/common/FileUpload/index"
  import {listItem} from "@/api/payfee/item";
  import {listNorm} from "@/api/payfee/norm";
  export default {
    name: "reletForm",
    dicts: ['business_status', 'brand_level ', ' lease_contract_status','custom_type',  'payment_rules',  'charge_generate_type',   ],
    components:{ Treeselect,FileUploads },
    mixins:[ contractMixin ],
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        customInfoOptions:[],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          resourceId: [
            {required: true, message: "出租房源不能为空", trigger: "blur"}
          ],
          contractCategoryId: [
            {required: true, message: "合同类型不能为空", trigger: "blur"}
          ],
          partyId: [
            {required: true, message: "甲方不能为空", trigger: "blur"}
          ],
          customType: [
            {required: true, message: "租户类型不能为空", trigger: "blur"}
          ],
          linkman: [
            {required: true, message: "联系人不能为空", trigger: "blur"}
          ],
          beginTime: [
            {required: true, message: "合同开始日期不能为空", trigger: "blur"}
          ],
          finishTime: [
            {required: true, message: "合同结束日期不能为空", trigger: "blur"}
          ],
          roomNormId: [
            {required: true, message: "收费标准不能为空", trigger: "blur"}
          ],
          chargingCycle: [
            {required: true, message: "计费周期不能为空", trigger: "blur"}
          ],
          markerRule: [
            {required: true, message: "生成规则不能为空", trigger: "blur"}
          ],
        },
        type:null,
        firstPartyOptions:[],
        itemOptions:[],
        normOptions:[],
        activeName: 'bzj'
      };
    },
    created() {
      listFirstParty({'contractCategoryId':this.form.contractCategoryId,'whereDefault':'Y'}).then(res=>{
        this.firstPartyOptions = res.rows;
      });
      listItem().then(res=>{
        this.itemOptions=res.rows;
      });
      listNorm({'projectId':"05"}).then(response=>{
        this.normOptions =response.rows;
      })
    },
    watch:{
      // 'form.resourceId'(v){
      //     getRoom(v).then(res=>{
      //       if (res.data.state!='10001'){
      //         this.msgError("该房源不是物业持有,不能租赁!")
      //         this.form.resourceId=null;
      //       }
      //       this.form.communityId = res.data.communityId;
      //       listNorm({'deptId':res.data.communityId,'projectId':"05"}).then(response=>{
      //         this.normOptions =response.rows;
      //       })
      //     })
      // },
      'form.customType'(v){
        listCustomInfo({'communityId':this.form.communityId,'customType':this.form.customType}).then(res=>{
          this.customInfoOptions = res.rows;
        })
      },
      'form.linkman'(v){
        getCustomInfo(v).then(res=>{
          this.form.cellPhoneNumber = res.data.cellPhoneNumber;
         this.form.contactAddress = res.data.contactAddress;
          this.form.idCard = res.data.idCard;
        })
      },
      'form.allottedTime'(v){
        this.form.finishTime= this.getNextMonthDay(this.form.beginTime,v);
      },
      'form.beginTime'(v){
        this.form.finishTime= this.getNextMonthDay(v,this.form.allottedTime);
      }
    },
    methods: {
      show(option) {
        this.reset();
        this.disabled = true
        this.type = option.type
          this.open = true;

          getLeaseContract(option.id).then(response => {
            this.form = response.data;
            this.$set(this.form, "beginTime",this.getDay(1,response.data.finishTime))
            this.$set(this.form, "chargeTime", this.parseTime(new Date()))
            this.$set(this.form, "signTime", this.parseTime(new Date()))
            this.title = "续租租赁合同";
            this.open = true;
          });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          communityId: null,
          resourceId: null,
          contractCategoryId: null,
          no: null,
          partyId: null,
          partyName: null,
          partyContacts: null,
          partyPhone: null,
          customId: null,
          customName: null,
          customType: null,
          linkman: null,
          cellPhoneNumber: null,
          contactAddress: null,
          idCard: null,
          beginTime: null,
          finishTime: null,
          allottedTime: null,
          signTime: null,
          leaseArea: null,
          businessStatus: null,
          businessBrand: null,
          brandLevel: null,
          businessScope: null,
          filePath: null,
          reletStatus: "0",
          status: "0",
          createBy: null,
          createDeptId: null,
          createDeptName: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          chargeId: '09',
          chargeMoneys: null,
          roomNormId: null,
          roomNormMoney: null,
          chargingCycle: null,
          markerRule: null,
          chargeNum: null,
          chargeTime: null
        };
        this.resetForm("form");
      },
      clickPartyId(v){
        getFirstParty(v).then(res=>{
          this.form.partyContacts = res.data.partyContacts;
          this.form.partyPhone = res.data.partyPhone;
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
              addLeaseContract(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
          }
        });
      }
    }
  };
</script>
